<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试select2-4.1.0</title>
    <link rel="stylesheet" type="text/css" href="../dist/css/select2.css">
    <link rel="stylesheet" type="text/css" href="../dist/css/bootstrap.min.css">
    <script type="application/javascript" src="../../jquery-1.9.1.min.js"></script>
    <!--<script type="application/javascript" src="../../jquery-3.2.1.min.js"></script>-->
    <script type="application/javascript" src="../dist/js/select2.js"></script>
    <script type="application/javascript" src="../dist/js/i18n/zh-CN.js"></script>
</head>

<body>
<div class="container">
    <div class="col-md-12">
        <h1 style="text-align:center">Select2 Live Demo</h1>

        <h6 style="text-align:center"><a href="https://ops-coffee.cn">@ops-coffee.cn</a>
            <a href="https://blog.ops-coffee.cn/s/2w956ln2fA1jzdC-UQ55Vg">点我查看对应使用文档</a>
        </h6>
        <div class="form-group">
            <label class="control-label">单选--option：</label>
            <select class="form-control" id="demo1">
                <option value="000">-----请选择-----</option>
                <option value="1">AAA</option>
                <option disabled value="2">BBB</option>
                <option value="3">CCC</option>
                <option value="4">DDD</option>
                <option value="5">EEE</option>
            </select>
        </div>
        <div class="form-group">
            <label class="control-label">多选-option：</label>
            <!--必须加multiple,否则默认回填了一个,且placeholder不生效,对于把option配置在data中的可以不加-->
            <select class="form-control" id="demo2" multiple="multiple">
                <!--<select class="form-control" id="demo2">-->
                <option value="1">AAA</option>
                <option value="2">BBB</option>
                <option value="3">CCC</option>
                <option value="4">DDD</option>
                <option value="5">EEE</option>
                <option value="6">FFF</option>
                <option value="7">GGG</option>
                <option value="8">HHH</option>
            </select>
        </div>
        <div class="form-group">
            <label class="control-label">多选-data：</label>
            <!--此multiple属性可以不加也可以是多选-->
            <select class="form-control" id="demo3">
                <!--<select class="form-control" id="demo3">-->
            </select>
        </div>

        <div class="form-group">
            <label class="control-label">单选-data：</label>
            <!--此multiple属性可以不加也可以是多选-->
            <select class="form-control" id="demo4">
                <!--<select class="form-control" id="demo3">-->
            </select>
        </div>


        <div class="form-group">
            <label class="control-label">Demo1 - 单选Demo：</label>
            <select class="form-control" id="id_select2_demo1">
                <option value="">-----单选-----</option>
                <optgroup label="Group-A">
                    <option value="1">OPS-COFFEE-A</option>
                    <option value="2">OPS-COFFEE-B</option>
                </optgroup>

                <optgroup label="Group-B">
                    <option value="3">OPS-COFFEE-C</option>
                    <option value="4">OPS-COFFEE-D</option>
                </optgroup>
                <optgroup label="Group-C">
                    <option value="5">OPS-COFFEE-E</option>
                    <option value="6">OPS-COFFEE-F</option>
                </optgroup>
                <option value="7">OPS-COFFEE-G</option>
            </select>
        </div>
        <div class="form-group">
            <label class="control-label">Demo2 - 从本地加载数据：</label>
            <select class="form-control" id="id_select2_demo2"></select>
        </div>
        <div class="form-group">
            <label class="control-label">Demo3 - 从后端加载数据：</label>
            <select class="form-control" id="id_select2_demo3"></select>
        </div>
        <div class="form-group">
            <label class="control-label">Demo4 - 多选Demo：</label>
            <select class="form-control" id="id_select2_demo4" multiple="multiple">
                <option value="1">OPS-COFFEE-A</option>
                <option value="2">OPS-COFFEE-B</option>
                <option value="3">OPS-COFFEE-C</option>
                <option value="4">OPS-COFFEE-D</option>
                <option value="5">OPS-COFFEE-E</option>
                <option value="6">OPS-COFFEE-F</option>
                <option value="7">OPS-COFFEE-G</option>
            </select>
        </div>
        <div class="form-group">
            <button class="btn btn-default btn-block" id="ht1">点击回填单选--option：</button>
            <button class="btn btn-default btn-block" id="ht2">点击回填多选-option：</button>
            <button class="btn btn-default btn-block" id="ht3">点击回填多选-data：</button>
            <button class="btn btn-default btn-block" id="get1">点击获取1-3的值</button>
            <button class="btn btn-default btn-block" id="add">Add : 会给Demo1添加一个新的option并打开demo1</button>
            <button class="btn btn-primary btn-block" id="get">Get : 会获取Demo1的value和text并alert显示</button>
            <button class="btn btn-success btn-block" id="init">Init : 会给Demo1和Demo4动态的添加选中的option</button>
            <button class="btn btn-warning btn-block" id="clear">Clear : 会清掉Demo1和Demo4选中的option</button>
            <button class="btn btn-default btn-block" id="disabled">Disabled : 会Disabled掉Demo1和Demo4</button>
            <button class="btn btn-danger btn-block" id="destroy">销毁 : 会销毁掉Demo1和Demo4的select2样式，恢复默认样式</button>
        </div>
    </div>
</div>

</body>
</html>
<script>
    $ (function () {
        setDanxuan ();
        setDuoxuan ();
        setDemo3 ();
        setDemo4 ();

        $ ("#ht1").on ('click', function () {
            $ ("#demo1").val ('3').trigger ('change');
            //清空已选择的值
            //$("#demo1").val(null).trigger('change');
        });
        $ ("#ht2").on ('click', function () {
            $ ("#demo2").val (['2','3']).trigger ('change');
        });
        $ ("#ht3").on ('click', function () {
            $ ("#demo3").val (['2','3']).trigger ('change');
        });
        $ ("#get1").on ('click', function () {
            $ ("#demo3").val (['2','3']).trigger ('change');
            var val1 = $ ('#demo1').select2 ('val');
            alert (val1);
            //获取已选择的对象
            var data1 = $ ('#demo1').select2 ('data');
            console.log (data1);
            //获取已选择option的text值，以下代码中的[0]用来获取第一个对象，对单选合适，如果是多选的话需要循环获取
            var text1 = $ ("#demo1").select2 ("data")[0].text;
            alert (text1);
            var val2 = $ ('#demo2').select2 ('val');
            alert (val2);
            alert ($ ('#demo4').select2 ('val'));

        });
    });

    function setDanxuan () {
        //$ ("#demo1").select2 ();
        //添加删除按钮
        $ ("#demo1").select2 ({
            //placeholder: "---请选择---",
            placeholder: {
                id: '-2', // the value of the option
                text: '---请选择111---'
            },
            //单选清除生效必须加:placeholder参数
            allowClear: true,
            //如果页面上有option了,data项不生效
            data:data
        });
    }

    function setDuoxuan () {
        //$ ("#demo1").select2 ();
        //添加删除按钮
        $ ("#demo2").select2 ({
            placeholder: "---请选择,最多2个---",
            allowClear: true,
            width: 350,
            multiple: true,
            language:"zh-CN",//中文
            maximumSelectionLength:2,
            closeOnSelect: false
        });
    }

    function setDemo3 () {
        $ ("#demo3").select2 ({
            //placeholder: "---请选择---",
            placeholder: {
                id: '-2', // the value of the option
                text: '---请选择111---'
            },
            allowClear: true,
            width: 350,
            multiple: true,
            closeOnSelect: false,
            tags: true,//同时允许用户输入  适用单选和多选
            data: data
        });
    }
    //直接这样设置单选没有第一个空出来的
    function setDemo4 () {
        $ ("#demo4").select2 ({
            //placeholder: "---请选择---",
            placeholder: {
                id: '-2', // the value of the option
                text: '---请选择111---'
            },
            allowClear: true,
            width: 350,
            //multiple: true,
            closeOnSelect: false,
            tags: false,//同时允许用户输入  适用单选和多选
            data: data
        });
    }


    var data = [
        {
            "id": 1,
            "text": "Option 1",
            "selected": false
        },
        {
            "id": 2,
            "text": "Option 2",
            "selected": false
        },
        {
            "id": 3,
            "text": "Option 3",
            "disabled": false
        },
        {
            "id": 4,
            "text": "Option 4",
            "disabled": false
        }
    ];

    // select2单选
    var selectorx = $ ('#id_select2_demo1').select2 ({
        placeholder: '请选择'
    });

    // select2单选从本地加载数据
    var sdata = [{
        id: 1,
        text: 'OPS-COFFEE-1'
    },
        {
            id: 2,
            text: 'OPS-COFFEE-2'
        },
        {
            id: 3,
            text: 'OPS-COFFEE-3'
        }
    ];

    $ ('#id_select2_demo2').select2 ({
        data: sdata,
        minimumResultsForSearch: -1
    });

    // select2单选ajax异步加载数据
    $ ('#id_select2_demo3').select2 ({
        placeholder: '-----单选-----',
        ajax: {
            url: "sdata.json",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term,
                    site: "https://ops-coffee.cn"
                };
            },
            processResults: function (data) {
                return {
                    results: data.message
                };
            },
            cache: true
        },
        minimumInputLength: 2
    });

    // select2多选
    var selectory = $ ('#id_select2_demo4').select2 ({
        placeholder: '请选择，最多选择三个',
        allowClear: true,
        maximumSelectionLength: 3
    });

    // 动态添加值
    $ ('#add').click (function () {
        var _html = '<option value="9" selected>我是新加的：ops-coffee.cn</option>';
        $ ('#id_select2_demo1').append (_html).trigger ('change.select2');
        $ ('#id_select2_demo1').select2 ("open");
    });

    // 获取选中的值
    $ ('#get').click (function () {
        alert ('value: ' + $ ('#id_select2_demo1').select2 ('val') + ' text: ' +
                $ ("#id_select2_demo1").select2 ("data")[0].text);
    });

    // 动态选中，初始化
    $ ('#init').click (function () {
        $ ("#id_select2_demo1").val (2).trigger ("change");
        $ ("#id_select2_demo4").val ([2, 3, 5]).trigger ("change");
    });

    // 清空已选择的option
    $ ('#clear').click (function () {
        $ ("#id_select2_demo1").val (null).trigger ('change');
        $ ("#id_select2_demo4").val (null).trigger ('change');
    });

    // 禁用select2
    $ ('#disabled').click (function () {
        $ ("#id_select2_demo1").prop ('disabled', true);
        $ ("#id_select2_demo4").prop ('disabled', true);
    });

    // 销毁duallistbox插件
    $ ('#destroy').click (function () {
        $ ('#id_select2_demo1').select2 ("destroy");
        $ ('#id_select2_demo4').select2 ("destroy");
    });
</script>